import React from 'react';
import { NotificationBanner } from '@nova-hf/ui';
import UI from 'beta/store/ui';
import { inject } from 'mobx-react';
import { useTranslation } from 'utils/i18n';

type FiberMoveOrderContainerProps = {
  ui?: UI;
};

const FiberMoveOrderContainer = ({ ui }: FiberMoveOrderContainerProps) => {
  const { t } = useTranslation(['fiber']);

  return (
    <NotificationBanner
      icon="transfer"
      color={ui?.serviceColor}
      title={t('moveOrder.title')}
      description={t('moveOrder.description')}
      eyebrowText={t('moveOrder.eyebrow')}
      hasPingAlert={true}
    ></NotificationBanner>
  );
};

export default inject('authentication', 'ui')(FiberMoveOrderContainer);